<template>
  <div class="app-container p-n">
    <el-row type="flex" class="row-bg" justify="space-around">
      <el-col :span="7">
        <div class="grid-content bg-white">
          <el-card class="box-card">

            <el-row type="flex" class="p-t-20" justify="space-around">
              <el-col :span="6">
                <div class="grid-content">
                  <el-select v-model="infoType" filterable placeholder="信息单类型" @change="searchFrom" >
                    <el-option
                      v-for="item in infoTypeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
              </el-col>

              <el-col :span="16" :offset="0">
                <el-date-picker
                  v-model="listQuery.time"
                  :picker-options="pickerOptions"
                  type="datetimerange"
                  class="full-width"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  align="right"
                  size="small"
                  format="yyyy-MM-dd HH:mm"/>
              </el-col>
            </el-row>
            <el-row type="flex" class="p-t-20" justify="space-around">
              <el-col :span="6">
                <div class="grid-content">
                  <el-select v-model="informationStatus" filterable placeholder="信息单状态" @change="searchFrom" >
                    <el-option
                      v-for="item in informationStatusOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
              </el-col>
              <el-col :span="10">
                <div class="grid-content">
                  <el-input v-model="listQuery.keyword" placeholder="输入查询信息" clearable >
                    <i slot="prefix" class="el-input__icon el-icon-search"/>
                  </el-input>
                </div>
              </el-col>
              <el-col :span="5">
                <div class="grid-content text-right">
                  <el-button type="primary" @click="searchFrom">查询</el-button>
                </div>
              </el-col>
            </el-row>

            <el-table
              ref="singleTable"
              :data="tableData"
              highlight-current-row
              style="width: 100%;padding-top:10px"
              height="480"
              @current-change="currentChangeTable"

            >
              <el-table-column property="address" class="info-table">
                <template slot-scope="scope">
                  <el-row type="flex" justify="space-around">
                    <el-col :span="5">
                      <div class="grid-content p-10 p-t-n">
                        <el-tag v-if="scope.row.informationEventType==='需求'" type="success">{{ scope.row.informationEventType }}</el-tag>
                        <el-tag v-else-if="scope.row.informationEventType==='投诉'" type="danger">{{ scope.row.informationEventType }}</el-tag>
                        <el-tag v-else-if="scope.row.informationEventType==='咨询'" >{{ scope.row.informationEventType }}</el-tag>
                      </div>
                    </el-col>
                    <el-col :span="14">
                      <div class="grid-content">
                        <span class="f-14" style="color: #1b263a">{{ scope.row.name?scope.row.name:'--' }} : {{ !scope.row.remark?'--':scope.row.remark.length>15 ?scope.row.remark.substr(0,14)+'...':scope.row.remark }}</span>
                        <div class="bottom clearfix">
                          <time class="time">{{ scope.row.currentTime |parseDate('{y}-{m}-{d} {h}:{i}:{s}') }}</time>
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="5">
                      <div class="grid-content p-10">
                        <el-badge v-if="scope.row.informationStatus==='待处理' && scope.row.permission" is-dot>{{ scope.row.informationStatus }}</el-badge>
                        <div v-else>{{ scope.row.informationStatus }}</div>
                      </div>
                    </el-col>
                  </el-row>
                </template>
              </el-table-column>
            </el-table>
            <!--分页-->
            <div class="pagination-container" style="padding-top: 2px;height: 100px;">
              <el-row>
                <el-pagination
                  v-show="total>0"
                  :current-page="listQuery.page"
                  :page-sizes="[10,20,30, 50]"
                  :page-size="listQuery.pageSize"
                  :total="total"
                  small
                  class="text-right"
                  background
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </el-row>
            </div>

          </el-card>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="grid-content bg-white">
          <el-card :body-style="{ padding: '0px' }" class="box-card">
            <el-row type="flex" class="full-height" justify="space-around">
              <el-col :span="16" class="right-vertical">
                <div class="grid-content">
                  <div class="grid-header">
                    <div class="header-content p-10-20 p-t_b-19 clearfix">
                      跟踪单 <span>{{ tableInfo.informationNumber }}</span>
                      <el-button
                        style="float: right; padding: 3px 0"
                        type="text"
                        @click="inforFormVisible = true"
                      >
                        <i class="el-icon-circle-plus el-icon--left"/>添加信息单
                      </el-button>
                      <el-dialog
                        :visible.sync="inforFormVisible"
                        title="新增信息单 （咨询）"
                        width="40%"
                        center
                      >
                        <el-form ref="inforForm" :model="inforForm" :rules="rules">
                          <el-row type="flex" justify="space-around">
                            <el-col :span="11">
                              <div class="grid-content">
                                <el-form-item :label-width="formLabelWidth" label="信息来源">
                                  <el-select v-model="inforForm.inforSource" placeholder="请选择">
                                    <el-option label="用户" value="用户"/>
                                    <el-option label="合作商" value="合作商"/>
                                    <el-option label="师傅" value="师傅"/>
                                  </el-select>
                                </el-form-item>
                                <el-form-item :label-width="formLabelWidth" label="联系电话" prop="contactPhone">
                                  <el-input v-model="inforForm.contactPhone" autocomplete="off"/>
                                </el-form-item>
                              </div>
                            </el-col>
                            <el-col :span="11">
                              <div class="grid-content">
                                <el-form-item :label-width="formLabelWidth" label="联系人">
                                  <el-input v-model="inforForm.contactName" autocomplete="off"/>
                                </el-form-item>
                                <el-form-item :label-width="formLabelWidth" label="立即结案" prop="promptly">
                                  <el-radio v-model="inforForm.promptly" :label="true" >是</el-radio>
                                  <el-radio v-model="inforForm.promptly" :label="false" >否</el-radio>
                                </el-form-item>
                              </div>
                            </el-col>
                          </el-row>
                          <el-row type="flex" justify="space-around">
                            <el-col :span="23">
                              <div class="grid-content">
                                <el-form-item :label-width="formLabelWidth" prop="problemDesc">
                                  <el-input
                                    :rows="4"
                                    v-model="inforForm.problemDesc"
                                    type="textarea"
                                    placeholder="问题描述必填"
                                    clearable
                                  />
                                </el-form-item>
                              </div>
                            </el-col>
                          </el-row>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                          <el-button @click="inforFormVisible = false">取 消</el-button>
                          <el-button type="primary" @click="addInfoOrder('inforForm')">提 交</el-button>
                        </div>
                      </el-dialog>
                    </div>
                  </div>
                  <div id="message-body" class="grid-body p-10-20 clearfix">
                    <div class="message item">
                      <ul>
                        <li v-for="msg in messageData" :key="msg.id" >
                          <p class="time">
                            <span>{{ msg.time |parseDate('{y}-{m}-{d} {h}:{i}:{s}') }}  {{ msg.name }}{{ msg.type?'-'+msg.type:'' }}{{ msg.nextName?'-'+msg.nextName:'' }}</span>
                          </p>
                          <div v-show="msg.message" :class="{ self: msg.self }" class="main">

                            <div v-if="msg.self" class="avatar circle">
                              <span>{{ msg.name.replace(/^(.*[n])*.*(.|n)$/g, "$2") }}</span>
                            </div>
                            <div v-else class="avatar circle">
                              <span>{{ msg.name.replace(/^(.*[n])*.*(.|n)$/g, "$2") }}</span>
                            </div>
                            <div>
                              <div style="margin-bottom: 8px;">
                                <label class="f-12">{{ msg.name }}</label>
                              </div>
                            </div>
                            <div class="text" style="max-width: 80%;background-color:#f0f2fa;"><p style="line-height: 1.6;">{{ msg.message }}</p></div>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content">
                  <div class="grid-header">
                    <div class="header-content p-10-20 p-t_b-19 clearfix" style="min-height: 60px;">
                      <span>信息</span>
                    </div>
                  </div>
                  <el-row class="p-10-20 f-14">
                    <p><label>信息来源：</label><span>{{ tableInfo.informationFromType }}</span></p>
                    <p><label>工单：</label><span>{{ tableInfo.orderNumber }}</span></p>
                    <p><label>联系人：</label><span>{{ tableInfo.contactsName }}</span></p>
                    <p><label>联系电话：</label><span>{{ tableInfo.contactsPhone }}</span></p>
                    <p><label>创建人：</label><span>{{ tableInfo.userName }}</span></p>
                    <p><label>创建时间：</label><span>{{ !tableInfo.createDatetime ? '--' :tableInfo.createDatetime |parseTime('{y}-{m}-{d}') }}</span></p>
                    <p><label>关联师傅名称：</label><span>{{ tableInfo.wokerName }}</span></p>
                    <p><label>关联师傅电话：</label><span>{{ tableInfo.wokerMobile }}</span></p>
                    <p><label>问题描述：</label></p>
                    <p class="border-1 p-20 remark">{{ tableInfo.problemDescribe }}</p>
                    <p><label>结案类型：</label><span>{{ tableInfo.finalTypeName?tableInfo.finalTypeName:'--' }}</span></p>
                    <p><label>计算催投评分：</label><span>{{ tableInfo.informationScoreMark==='Y'?'是':'否' }}</span></p>
                  </el-row>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getCusInfoOrders, getCusOrderTraces, sendTraceInfo, editTraceInfo, addInfoOrder, getFinalTypes, finalTraceInfo } from '@/api/information'
// , parseDate, pickerOptions
import { parseTime } from '@/utils'
// import axios from 'axios'
export default {
  filters: {},
  data() {
    return {
      createTime: '',
      activeName: '10',
      overInfor: false,
      inforFormVisible: false,
      evenTypeVisible: false,
      remark: '',
      total: 1,
      listLoading: true,
      listQuery: {
        page: 1,
        pageSize: 10,
        keyword: null,
        queryType: null,
        informationEvenType: null,
        informationStatus: null,
        time: null,
        createTimeStart: null,
        createTimeEnd: null,
        pageNumber: null

      },
      rules: {
        informationScoreMark: [
          { required: true, message: '请选择是否评分', trigger: 'blur' }
        ],
        finalTypeId: [
          { required: true, message: '请选择结案类型', trigger: 'blur' }
        ],
        contactPhone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' }
        ],
        problemDesc: [
          { required: true, message: '请输入备注或传达', trigger: 'blur' }
        ]
      },
      tableData: [],
      tableInfo: {},
      snedMsg: '',
      disabledRemark: false,
      messageData: [
      ],
      infoType: '',
      infoTypeOptions: [
        {
          value: '',
          label: '信息单类型'
        },
        {
          value: '投诉',
          label: '投诉'
        },
        {
          value: '咨询',
          label: '咨询'
        },
        {
          value: '需求',
          label: '需求'
        }
      ],
      informationStatus: '',

      informationStatusOptions: [
        {
          value: '',
          label: '信息单状态'
        },
        {
          value: '新建单',
          label: '新建单'
        },
        {
          value: '待处理',
          label: '待处理'
        },
        {
          value: '处理中',
          label: '处理中'
        },
        {
          value: '已结案',
          label: '已结案'
        }
      ],

      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              const start = new Date()
              const end = new Date()
              const hours = new Date().getHours()
              const minutes = new Date().getMinutes()
              start.setTime(start.getTime() - 3600 * 1000 * hours - minutes * 60 * 1000)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const start = new Date()
              const end = new Date()
              const hours = new Date().getHours()
              const minutes = new Date().getMinutes()
              end.setTime(end.getTime() - 3600 * 1000 * hours - minutes * 60 * 1000)
              start.setTime(start.getTime() - 3600 * 1000 * 24 - 3600 * 1000 * hours - minutes * 60 * 1000)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '近7天',
            onClick(picker) {
              const start = new Date()
              const end = new Date()
              // const hours = new Date().getHours()
              // const minutes = new Date().getMinutes()
              end.setTime(
                end.getTime()
              )
              start.setTime(
                start.getTime() - 3600 * 1000 * 7 * 24
              )
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '近30天',
            onClick(picker) {
              const start = new Date()
              const end = new Date()
              // const hours = new Date().getHours()
              // const minutes = new Date().getMinutes()
              end.setTime(
                end.getTime()
              )
              start.setTime(
                start.getTime() - 3600 * 1000 * 30 * 24
              )
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      inforForm: {
        inforSource: '用户',
        contactName: '',
        contactPhone: '',
        promptly: true,
        problemDesc: ''
      },
      formLabelWidth: '120px',
      evenFormLabelWidth: '100px',
      currentRow: null,
      finalTypes: [],
      finalFrom: {
        informationScoreMark: 'Y',
        finalTypeId: ''
      },
      handleName: '全部',
      handleValue: '5',
      timer: null
    }
  },
  computed: {

  },
  watch: {
    messageData() {
      console.log('chatlog change')
      this.$nextTick(() => {
        var container = this.$el.querySelector('#message-body')
        console.log(container)
        container.scrollTop = container.scrollHeight
      })
    }
  },
  created() {
    this.getList()
    // 定时刷新数据
    /* if(this.timer){
        clearInterval(this.timer)
      }else{
        this.timer = setInterval(() => {
        this.refalushList();
        },1000*10);
      }*/
  },
  mounted() {

  },
  methods: {
    formatterRemark(row, column) {
      if (row.remark.length >= 15) {
        return row.remark.substr(0, 15) + '...'
      }
    },
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row)
      this.initChangeTable(row)
    },
    initChangeTable(row) {
      this.currentRow = row
    },
    currentChangeTable(row) {
      this.currentRow = row
      // 获取跟踪记录 TODO
      if (this.tableData) { // 选择记录
        for (var i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i].informationId === row.informationId) {
            this.tableInfo = this.tableData[i]
            this.getCusOrderTraces(this.tableInfo.informationNumber)
          }
        }
      }
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    getCusOrderTraces(val) {
      var data = {
        informationNumber: val
      }
      getCusOrderTraces(data).then(response => {
        if (response.data.status === 'success') {
          if (!this.tableInfo.informationNumber || this.tableInfo.informationStatus === '已结案' || !this.tableInfo.permission) {
            if (this.tableInfo.informationStatus === '待处理') {
              this.snedMsg = '当前信息单已下送，无须备注'
            } else if (this.tableInfo.informationStatus === '已结案') {
              this.snedMsg = '当前信息单已结案，无须备注'
            }
            this.disabledRemark = true
          } else {
            this.snedMsg = null
            this.disabledRemark = false
          }

          if (response.data.data.length === 0) {
            this.listLoading = false
            this.messageData = []
            return
          }
          this.messageData = response.data.data
          this.listLoading = false
        } else if (response.data.status === 'token_check_faild') {
          this.$message({
            message: response.data.messge,
            type: 'warning'
          })
          this.listLoading = false
        }
      }).catch(error => {
        console.log(error)
        this.$message({
          message: '数据加载失败',
          type: 'warning'
        })
        this.listLoading = false
      })
    },
    refalushList() {
      this.listLoading = true
      this.listQuery.pageNumber = (this.listQuery.page - 1) * this.listQuery.pageSize
      this.listQuery.informationEvenType = this.infoType
      this.listQuery.informationStatus = this.informationStatus
      this.listQuery.queryType = this.activeName
      getCusInfoOrders(this.listQuery).then(response => {
        if (response.data.status === 'success') {
          if (response.data.data.list.length === 0) {
            this.listLoading = false
            this.messageData = []
            this.tableData = []
            this.tableInfo = {}
            return
          }
          this.total = response.data.data.total
          this.currentChangeTable(this.currentRow)
          this.tableData = response.data.data.list
          this.listLoading = false
        } else if (response.data.status === 'token_check_faild') {
          this.$message({
            message: response.data.messge,
            type: 'warning'
          })
          this.listLoading = false
        }
      }).catch(error => {
        console.log(error)
        this.$message({
          message: '数据加载失败',
          type: 'warning'
        })
        this.listLoading = false
      })
    },
    getList() {
      this.listLoading = true
      this.listQuery.pageNumber = (this.listQuery.page - 1) * this.listQuery.pageSize
      this.listQuery.informationEvenType = this.infoType
      this.listQuery.informationStatus = this.informationStatus
      this.listQuery.queryType = this.activeName
      getCusInfoOrders(this.listQuery).then(response => {
        if (response.data.status === 'success') {
          if (response.data.data.list.length === 0) {
            this.listLoading = false
            this.messageData = []
            this.tableData = []
            this.tableInfo = {}
            return
          }
          this.total = response.data.data.total
          this.tableData = response.data.data.list
          this.setCurrent(this.tableData[0])
          this.listLoading = false
        } else if (response.data.status === 'token_check_faild') {
          this.$message({
            message: response.data.messge,
            type: 'warning'
          })
          this.listLoading = false
        }
      }).catch(error => {
        console.log(error)
        this.$message({
          message: '数据加载失败',
          type: 'warning'
        })
        this.listLoading = false
      })
    },
    searchFrom() {
      clearInterval(this.timer)
      if (this.listQuery.time !== null && this.listQuery.time !== '') {
        this.listQuery.createTimeStart = parseTime(this.listQuery.time[0], '{y}-{m}-{d} {h}:{i}')
        this.listQuery.createTimeEnd = parseTime(this.listQuery.time[1], '{y}-{m}-{d} {h}:{i}')
      } else {
        this.listQuery.createTimeStart = null
        this.listQuery.createTimeEnd = null
      }
      this.listQuery.pageNumber = 0
      this.listQuery.page = 1
      this.getList()
    },
    handleClick(tab, event) {
      this.infoType = ''
      this.listQuery.page = 1
      this.getList()
    },
    handleCommand(command) {
      this.listQuery.page = 1
      this.activeName = command
      this.handleValue = command
      this.infoType = ''
      if (command === '3') {
        this.handleName = '跟进中(未)'
      }
      if (command === '6') {
        this.handleName = '跟进中(已)'
      }
      if (command === '4') {
        this.handleName = '已结案'
      }
      if (command === '5') {
        this.handleName = '全部'
      }
      this.getList()
    },
    sendTraceInfo() {
      if (!this.snedMsg) {
        this.$message({
          message: '请输入备注或传达！',
          type: 'warning'
        })
        return
      }
      var data = new FormData()
      // var data = {
      //   informationId :this.tableInfo.informationId,
      //   informationNumber :this.tableInfo.informationNumber,
      //   orderId :this.tableInfo.orderId,
      //   remark :this.snedMsg
      // }

      data.append('informationId', this.tableInfo.informationId)
      data.append('informationNumber', this.tableInfo.informationNumber)

      data.append('orderId', this.tableInfo.orderId)
      data.append('remark', this.snedMsg)
      // debugger
      this.$confirm('确认下送?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        sendTraceInfo(data).then(response => {
          if (response.data.status === 'success') {
            this.$message({
              message: '下送成功,处理下一条！',
              type: 'success'
            })
            this.getList()
            this.snedMsg = null
          } else {
            this.$message({
              message: response.data.messge ? response.data.messge : '下送失败，请联系技术人员处理',
              type: 'warning'
            })
          }
        }).catch(error => {
          this.$message({
            message: '下送异常',
            type: 'warning'
          })
          console.log(error)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消下送'
        })
      })
    },
    addInfoOrder(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var data = new FormData()
          data.append('informationEventType', '咨询')
          data.append('informationFromType', this.inforForm.inforSource)
          data.append('contactsName', this.inforForm.contactName)
          data.append('contactsPhone', this.inforForm.contactPhone)
          data.append('channel', '工单')
          data.append('problemDescribe', this.inforForm.problemDesc)
          data.append('skillGroupId', 1)
          data.append('isCloseRightOff', this.inforForm.promptly)
          // var data = {
          //   informationEventType:'咨询',
          //   informationFromType:this.inforForm.inforSource,
          //   contactsName:this.inforForm.contactName,
          //   contactsPhone:this.inforForm.contactsPhone,
          //   channel:'工单',
          //   problemDescribe :this.inforForm.problemDesc,
          //   skillGroupId:1,
          //   isCloseRightOff:this.inforForm.promptly
          // }
          this.$confirm('确认添加?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            addInfoOrder(data).then(response => {
              if (response.data.status === 'success') {
                this.getList()
                this.$message({
                  message: '添加成功',
                  type: 'success'
                })
                this.inforFormVisible = false
                this.inforForm.inforSource = '用户'
                this.inforForm.contactName = ''
                this.inforForm.contactPhone = ''
                this.inforForm.promptly = 'true'
                this.inforForm.problemDesc = ''
              } else {
                this.$message({
                  message: '添加失败',
                  type: 'warning'
                })
              }
            }).catch(error => {
              this.$message({
                message: '添加失败',
                type: 'warning'
              })
              console.log(error)
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消添加'
            })
          })
        }
      })
    },
    editTraceInfo() {
      if (!this.snedMsg) {
        this.$message({
          message: '请输入备注或传达！',
          type: 'warning'
        })
        return
      }
      var data = new FormData()
      // var data = {
      //   informationId :this.tableInfo.informationId,
      //   informationNumber :this.tableInfo.informationNumber,
      //   orderId :this.tableInfo.orderId,
      //   remark :this.snedMsg
      // }
      data.append('informationId', this.tableInfo.informationId)
      data.append('informationNumber', this.tableInfo.informationNumber)
      data.append('orderId', this.tableInfo.orderId)
      data.append('remark', this.snedMsg)
      editTraceInfo(data).then(response => {
        if (response.data.status === 'success') {
          this.snedMsg = null
          this.getList()
          this.$message({
            message: '保存成功',
            type: 'success'
          })
          this.snedMsg = null
          this.getList()
        } else {
          this.$message({
            message: response.data.messge ? response.data.messge : '保存失败，请联系技术人员处理',
            type: 'warning'
          })
        }
      }).catch(error => {
        this.$message({
          message: '保存异常',
          type: 'warning'
        })
        console.log(error)
      })
    },
    getFinalTypes() {
      this.evenTypeVisible = true
      getFinalTypes().then(response => {
        if (response.data.status === 'success') {
          if (response.data.data.length === 0) {
            this.listLoading = false
            this.finalTypes = []
            return
          }
          this.finalTypes = response.data.data
          this.listLoading = false
        } else if (response.data.status === 'token_check_faild') {
          this.$message({
            message: response.data.messge,
            type: 'warning'
          })
          this.listLoading = false
        }
      }).catch(error => {
        console.log(error)
        this.$message({
          message: '结案类型加载失败',
          type: 'warning'
        })
        this.listLoading = false
      })
    },
    immediatelyFinalTraceInfo() {
      var data = new FormData()
      data.append('informationId', this.tableInfo.informationId)
      data.append('informationNumber', this.tableInfo.informationNumber)
      data.append('orderId', this.tableInfo.orderId)
      data.append('remark', this.snedMsg)
      data.append('finalTypeId', this.finalFrom.finalTypeId)
      data.append('informationScoreMark', 'N')
      finalTraceInfo(data).then(response => {
        if (response.data.status === 'success') {
          this.getList()
          this.$message({
            message: '结案成功',
            type: 'success'
          })
          this.snedMsg = ''
          this.overInfor = false
        } else {
          this.$message({
            message: response.data.messge ? response.data.messge : '下送失败，请联系技术人员处理',
            type: 'warning'
          })
        }
      }).catch(error => {
        this.$message({
          message: '结案失败',
          type: 'warning'
        })
        console.log(error)
      })
    },
    cancelFinal(formName) {
      this.evenTypeVisible = false
      this.resetForm(formName)
    },

    finalTraceInfo(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var data = new FormData()
          data.append('informationId', this.tableInfo.informationId)
          data.append('informationNumber', this.tableInfo.informationNumber)
          data.append('orderId', this.tableInfo.orderId)
          data.append('remark', this.snedMsg)
          data.append('finalTypeId', this.finalFrom.finalTypeId)
          data.append('informationScoreMark', this.finalFrom.informationScoreMark)
          this.$confirm('确认结案?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            finalTraceInfo(data).then(response => {
              if (response.data.status === 'success') {
                this.$message({
                  message: '结案成功',
                  type: 'success'
                })
                this.snedMsg = ''
                this.getList()
                this.resetForm(formName)
                this.evenTypeVisible = false
              } else {
                this.$message({
                  message: '结案失败',
                  type: 'warning'
                })
              }
            }).catch(error => {
              this.$message({
                message: '结案失败',
                type: 'warning'
              })
              console.log(error)
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消结案'
            })
          })
        } else {
          return
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style>
.el-col {
  border-radius: 4px;
}
.bg-white {
  background: #ffffff;
}
.grid-content {
  border-radius: 4px;
  height: 100%;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f3f3f4;
}
.el-table__header-wrapper {
  display: none;
}
.info-table {
  margin-left: 10px;
  margin-right: 10px;
}
.bg-purple {
  background: #196;
}
.time {
  font-size: 12px;
  color: #8f97a4;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
.item {
  margin-top: 10px;
}
.text-right {
  text-align: right;
}
.el-date-editor.el-input {
  width: 100%;
}
.f-12 {
  font-size: 12px;
}
.f-14 {
  font-size: 14px;
}
.p-b-15 {
  padding-bottom: 15px;
}
.p-b-5 {
  padding-bottom: 15px;
}
.p-t-5 {
  padding-top: 5px;
}
.p-n {
  padding: 0px;
}
.p-t-n {
  padding-top: 0;
}
.p-10 {
  padding: 10px;
}
.p-20 {
  padding: 20px;
}
.p-t-20 {
  padding-top: 20px;
}
.p-10-20 {
  padding: 10px 20px;
}
.p-t_b-19 {
  padding-top: 19px;
  padding-bottom: 19px;
}
.border-1 {
  border: #ebeef5 1px solid;
}
.el-card {
  height: 100%;
}
.right-vertical {
  border-right: #ebeef5 1px solid;
  border-radius: unset;
}
.el-card__body {
  height: 100%;
  padding: 0px;
}
.full-height {
  height: 100%;
}
.full-width {
  width: 100% !important;
}
.el-card__header {
  border: none;
}
.header-content {
  padding-top: 18px;
  border-bottom: #ebeef5 1px solid;
}
.grid-body {
  overflow-y: auto;
  height: 534px;
  min-height: 500px;
  border-bottom: #ebeef5 1px solid;
}
.grid-bottom {
  min-height: 200px;
}
.text-right {
  text-align: right;
}
label {
  color: #999;
  font-weight: 500;
}
ul {
  list-style: none;
}
* {
  box-sizing: border-box;
}
.message {
  height: calc(100% - 160px);
  padding: 10px 15px;
}
.message ul {
  margin: 0;
  padding: 0;
}
.message li {
  margin-bottom: 15px;
}
.message .time {
  color: #8f97a4;
  font-size: 12px;
  margin: 7px 0;
  text-align: center;
}
.message .avatar {
  float: left;
  margin: 0 10px 0 0;
  font-size: 24px;
  width: 60px;
  height: 60px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #1b263a;
  font-weight: 600;
  background: #f5f9fc;
}
.message .self .avatar {
  float: right;
  margin: 0 0 0 10px;
}
.message .text {
  display: inline-block;
  position: relative;
  padding: 0 10px;
  max-width: calc(100% - 40px);
  min-height: 30px;
  line-height: 2.5;
  font-size: 12px;
  text-align: left;
  word-break: break-all;
  background-color: #fafafa;
  border-radius: 4px;
}
.message .self {
  text-align: right;
}
.message .self .text {
  background-color: #b2e281;
}
.remark {
  overflow-y: auto;
  height: 130px;
}
.el-card__header {
  padding: 20px 0 0 0;
}
.el-pagination__total,
.el-pagination__sizes,
.btn-prev,
.el-pager,
.btn-next,
.el-pagination__jump {
  margin-top: 10px !important;
}
.el-pagination {
  white-space: pre-wrap;
}
.el-tabs__item.is-active {
  font-weight: 600;
  color: #28a087;
}
.el-tabs__active-bar {
  background-color: #28a087;
}
.el-tabs__item:hover {
  color: #28a087;
}
.el-dropdown {
  color: inherit;
}
.el-dropdown-menu--medium .el-dropdown-menu__item:hover {
  color: #28a087;
}
.el-range-editor--small.el-input__inner {
  height: 36px;
}
.default-color {
  color: #28a087;
}
.default-background-color {
  background-color: #28a087;
}
.circle {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  background: #666;
}
.el-button--primary:focus,
.el-button--primary:hover {
  background: #28a087;
  border-color: #28a087;
  color: #fff;
}
/* .el-button:focus,
.el-button:hover {
  color: #fff;
  border-color: #c6e2ff;
  background-color: #28a087;
} */
.el-button--primary {
  border-color: #28a087;
}
.font-color {
  color: #fff;
}
.el-table tr {
    display: grid;
    border: 1px solid #e9edf0;
    border-color: #e9edf0;
}
.el-table__row {
  border: 1px solid #e9edf0;
  margin-top: 6px;
}
tr:first-child {
  margin-top: 0;
}
.el-table td, .el-table th.is-leaf {
  border: none;
}
.el-table__body tr.current-row>td {
  background-color: #e7eef8;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #28a087;
    color: #fff;
}
.el-button--text {
    color: #28a087;
}

/* .el-pagination.is-background .el-pager li:not(.disabled):hover {
    color: #fff;
} */
</style>
